import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from '@ant-design/icons';
import { Layout, Menu } from 'antd';
import React, { useState } from 'react';
import { Outlet,  useNavigate } from 'react-router-dom';
const { Header, Sider, Content } = Layout;

const App: React.FC = () => {
  const navgiate = useNavigate()
  const [collapsed, setCollapsed] = useState(false);
  // const location = useLocation()
  return (
    <Layout style={{ height: "100vh" }}>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="logo" />
        <Menu onClick={(e) => {
          console.log(e);
          navgiate(e.key)
        }}
          theme="dark"
          mode="inline"
          defaultSelectedKeys={["/home/index"]}
          defaultOpenKeys={["/home"]}
          items={[
            {
              key: '/home/index',
              icon: <UserOutlined />,
              label: '首页',
            },
            {
              key: '/home',
              icon: <VideoCameraOutlined />,
              label: '授权管理', children: [
                {
                  key: '/home/manage',
                  icon: <UploadOutlined />,
                  label: '员工管理',
                },
              ]
            },

          ]}
        />
      </Sider>
      <Layout className="site-layout" >
        <Header className="site-layout-background" style={{ padding: 0, background: "white" }}>
       
          <div>
              {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
            className: 'trigger',
            onClick: () => setCollapsed(!collapsed),
          })}
          </div>
          <div></div>

        </Header>
        <Content
          className="site-layout-background"
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
          }}
        >
          <Outlet />
        </Content>
      </Layout>
    </Layout>
  );
};

export default App;